<template>
  <div class="page-friend">
    <page-cover
      title="朋友们🍷~"
      subtitle="莫愁前路无知己,天下谁人不识君!"
      bg="https://dongping-blog.oss-cn-hangzhou.aliyuncs.com/systemImage/3a66b2614b83450390e115dec4d14e80.png"
    ></page-cover>

    <main v-loading="neighbor.loading">
      <!-- 邻居列表 -->
      <div class="friend-list">
        <div
          @click="access(item)"
          v-for="(item, index) in neighbor.lists"
          :key="index"
          class="item"
        >
          <div class="bg">
            <el-image
              style="width: 100%; height: 100%"
              fit="cover"
              :src="item.headImg"
              lazy
            ></el-image>
          </div>
          <div class="head">
            <el-image :src="item.headImg" lazy></el-image>
          </div>
          <div class="nickname">{{ item.nickname }}</div>
          <div class="personal-signature">{{ item.personalSignature }}</div>
        </div>
        <div class="item item-placeholder"></div>
        <div class="item item-placeholder"></div>
        <div class="item item-placeholder"></div>
        <div class="item item-placeholder"></div>

        <!-- 加载更多 -->
        <div class="more">
          <span>
            <span
              @click="loadingMoreNeighbor"
              v-if="
                !neighbor.loadingMore && neighbor.lists.length < neighbor.total
              "
            >
              还有{{ neighbor.total - neighbor.lists.length }}户,看一下
              <i class="el-icon-arrow-down"></i>
            </span>
            <span
              v-else-if="
                neighbor.loadingMore && neighbor.lists.length < neighbor.total
              "
            >
              <i class="el-icon-loading"></i>
              加载中...
            </span>
            <span v-else>没有更多啦~</span>
          </span>
        </div>
      </div>
      <!-- 申请邻居 -->
      <div v-loading="applyData.loading" class="apply">
        <!-- 申请表单 -->
        <el-form
          :model="applyData.postData"
          :rules="applyData.rules"
          ref="apply"
          label-width="90px"
        >
          <div class="row">
            <el-form-item label="昵称" prop="nickname">
              <el-input
                v-model="applyData.postData.nickname"
                placeholder="例 : 有余"
              ></el-input>
            </el-form-item>
            <el-form-item label="签名" prop="personalSignature">
              <el-input
                v-model="applyData.postData.personalSignature"
                placeholder="例 : 手执烟火以谋生,心怀诗意至远方~"
              ></el-input>
            </el-form-item>
          </div>
          <div class="row">
            <el-form-item label="地址" prop="link">
              <el-input
                v-model="applyData.postData.link"
                placeholder="https://xxx.com"
              ></el-input>
            </el-form-item>
            <el-form-item label="QQ邮箱" prop="email">
              <el-input
                v-model="applyData.postData.email"
                placeholder="通过后会自动发送邮箱通知~"
              ></el-input>
            </el-form-item>
          </div>
          <div class="row">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="applyData.postData.remark"
                placeholder="例 : 我换域名啦,博主帮我更新下哦"
              ></el-input>
            </el-form-item>
          </div>

          <el-form-item label="头像" prop="headImg">
            <upload-img
              ref="uploadImg"
              @change="selectImg"
              :multiple="1"
            ></upload-img>
            <el-button @click="submitApply" size="mini" type="success" plain
              >提交友链</el-button
            >
          </el-form-item>
        </el-form>

        <!-- 描述 -->
        <div class="describe">
          <div>
            <i class="el-icon-warning"></i>
            <p>
              每日申请上限是次数是
              <span style="color: #607199">{{
                blogger.neighborApplyFrequency
              }}</span>
              次 ,请不要重复提交
              <span
                style="color: #f56c6c"
                v-if="blogger.applyNum >= blogger.neighborApplyFrequency"
                >(今日申请已达上限!)</span
              >
            </p>
          </div>
          <div>
            <i class="el-icon-warning"></i>
            <p>包含恶意,不良,不合规的信息申请记录会被清理掉喔</p>
          </div>
          <div>
            <i class="el-icon-warning"></i>
            <p>
              申请有也记得把
              <span style="color: #607199">博主的小站</span>
              添加到 <span style="color: #607199">贵站</span> 的<span
                style="color: #607199"
                >友链</span
              >下面去哦
            </p>
          </div>
        </div>

        <div class="businesscard">
          <p>笔名 : 有余</p>
          <p>签名 : 手执烟火以谋生,心怀诗意至远方~</p>
          <p>地址 : https://dongping.link</p>
          <p>
            头像 :
            https://image.dongping.link/imageupload/3022db7803924133aeed921cb73822c9.png
          </p>
        </div>
      </div>

      <!-- 申请动态 -->
      <div class="dynamic-list">
        <div
          v-for="(item, index) in applyForDynamic.lists"
          :key="index"
          class="item"
        >
          <div class="info">
            {{ item.updateDate }}
            <span class="state">{{ filterState(item.state) }}</span>
          </div>
          <div class="blogger">
            <div class="head-img">
              <el-image :src="item.headImg" lazy></el-image>
            </div>
            <div class="right">
              <p>{{ item.nickname }}</p>
              <p>{{ item.personalSignature }}</p>
            </div>
          </div>
          <div v-if="item.state == 1 || item.describeText" class="notice">
            <i class="el-icon-bell"></i>
            <span v-if="item.state == 1">{{ item.nickname }},欢迎加入~</span>
            <span v-else>{{ item.describeText }}</span>
          </div>
        </div>

        <!-- 加载更多 -->
        <div class="more">
          <span>
            <span
              @click="loadingMoreApplyForDynamic"
              v-if="
                !applyForDynamic.loadingMore &&
                applyForDynamic.lists.length < applyForDynamic.total
              "
            >
              还有{{
                applyForDynamic.total - applyForDynamic.lists.length
              }}条,看一下
              <i class="el-icon-arrow-down"></i>
            </span>
            <span
              v-else-if="
                applyForDynamic.loadingMore &&
                applyForDynamic.lists.length < applyForDynamic.total
              "
            >
              <i class="el-icon-loading"></i>
              加载中...
            </span>
            <span v-else>没有更多啦~</span>
          </span>
        </div>
        <div style="height: 100px"></div>
      </div>
    </main>
  </div>
</template>

<script>
import uploadImg from "@/components/upload-img/upload-img.vue";
import pageCover from "@/components/page-cover/page-cover";

export default {
  name: "WorkspaceJsonFriend",
  components: {
    uploadImg,
    pageCover,
  },
  data() {
    return {
      applyData: {
        loading: false,
        postData: {
          nickname: "",
          headImg: "",
          link: "",
          email: "",
          personalSignature: "",
          remark: "",
        },
        rules: {
          nickname: [
            { required: true, message: "请输入昵称", trigger: "blur" },
          ],
          personalSignature: [
            { required: true, message: "请输入个性签名", trigger: "blur" },
          ],
          headImg: [{ required: true, message: "请上传头像", trigger: "blur" }],
          link: [
            { required: true, message: "请填写网站链接", trigger: "blur" },
          ],
          email: [{ required: true, message: "请输入QQ邮箱", trigger: "blur" }],
          remark: [
            { required: false, message: "请输填写备注", trigger: "blur" },
          ],
        },
      },

      neighborList: [],
      neighbor: {
        lists: [],
        loadingMore: false,
        loading: true,
        total: 0,
        postData: {
          pageSize: 10,
          pageIndex: 1,
        },
      },
      applyForDynamic: {
        lists: [],
        loadingMore: false,
        loading: true,
        total: 0,
        postData: {
          pageSize: 10,
          pageIndex: 1,
        },
      },
    };
  },
  computed: {
    blogger() {
      return this.$store.state.blogger;
    },
  },
  mounted() {
    this.getNeighborList();
    this.getApplyForDynamic();
  },
  methods: {
    getNeighborList() {
      this.$http("getNeighborList", this.neighbor.postData).then((res) => {
        this.neighbor.lists = [...this.neighbor.lists, ...res.data.lists];
        this.neighbor.total = res.data.total;
        this.neighbor.loadingMore = false;
        this.neighbor.loading = false;
      });
    },
    // 加载分页
    loadingMoreNeighbor() {
      if (this.neighbor.lists.length < this.neighbor.total) {
        this.neighbor.loadingMore = true;
        this.neighbor.postData.pageIndex += 1;
        this.getNeighborList();
      }
    },
    access(item) {
      window.open(item.link, "_blank");
    },
    // 获取申请动态
    getApplyForDynamic() {
      this.$http("applyForDynamic", this.applyForDynamic.postData).then(
        (res) => {
          this.applyForDynamic.lists = [
            ...this.applyForDynamic.lists,
            ...res.data.lists,
          ];
          this.applyForDynamic.loadingMore = false;
          this.applyForDynamic.total = res.data.total;
        }
      );
    },
    // 加载分页
    loadingMoreApplyForDynamic() {
      let { applyForDynamic } = this;
      if (applyForDynamic.lists.length < applyForDynamic.total) {
        applyForDynamic.loadingMore = true;
        applyForDynamic.postData.pageIndex += 1;
        this.getApplyForDynamic();
      }
    },

    // 选择头像
    selectImg(data) {
      if (data[0]) {
        this.applyData.postData.headImg = data[0].file;
      } else {
        this.applyData.postData.headImg = "";
      }
    },

    // 申请邻居
    async submitApply() {
      if (this.blogger.applyNum >= this.blogger.neighborApplyFrequency) {
        this.$notify({
          title: "小提示",
          message: "今日申请已达上限,明天再来呗",
          type: "warning",
        });
        return;
      }
      this.$refs["apply"].validate(async (valid) => {
        if (!valid) return false;
        this.applyData.loading = true;
        let img = await this.$upImg(this.applyData.postData.headImg);
        this.applyData.postData.headImg = img.data;

        this.$http("applyForNeighbor", this.applyData.postData).then((res) => {
          this.applyData.loading = false;
          this.applyData.postData = {
            nickname: "",
            headImg: "",
            link: "",
            email: "",
            personalSignature: "",
            remark: "",
          };

          this.$notify({
            title: "申请成功",
            message: "申请成功,博主审核后会邮箱通知你哦~",
            type: "warning",
          });
          this.blogger.applyNum += 1;
          this.$store.commit("setBlogger", this.blogger);
          this.$refs.uploadImg.clearData();
        });
      });
    },

    filterState(state) {
      let value = {
        1: "已入驻",
        2: "待审核",
        3: "申请失败",
      };
      return value[state];
    },
  },
};
</script>

<style lang="scss" scoped>
.page-friend {
  height: 100%;
  cursor: pointer;
}

main {
  max-width: 940px;
  min-height: 800px;
  border-radius: 8px;
  margin: -80px auto 0;
  position: relative;
  z-index: 2;
  padding: 0 10px;

  .friend-list {
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 8px;
    padding: 20px 10px 60px;
    position: relative;
    .item {
      min-width: 180px;
      text-align: center;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
      border-radius: 8px;
      overflow: hidden;
      margin: 10px 20px;
      border: 2px solid #fff;
      flex: 1;
      .bg {
        height: 70px;
        // background-image: url("https://dongping-blog.oss-cn-hangzhou.aliyuncs.com/systemImage/3a66b2614b83450390e115dec4d14e80.png");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        filter: blur(5px);
      }
      .head {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #f5f5f5;
        margin: auto;
        margin-top: -30px;
        position: relative;
        z-index: 2;
        overflow: hidden;
        border: 2px solid #fff;
      }
      .nickname {
        font-weight: 600;
        margin: 10px 0;
      }
      .personal-signature {
        font-size: 14px;
        color: #999;
        padding: 0 10px 20px;
        box-sizing: border-box;
      }
    }

    .item-placeholder {
      height: 0;
      opacity: 0;
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  .apply {
    background: #fff;
    border-radius: 6px;
    margin-top: 20px;
    padding: 30px 30px 30px 15px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
    .describe {
      color: #666;
      letter-spacing: 1.2px;
      line-height: 30px;
      padding: 0 15px 20px 20px;
      div {
        text-align: justify;
        display: flex;
        i {
          margin-top: 5px;
          margin-right: 5px;
        }
      }
    }
    .el-form {
      .el-form-item {
        flex: 1;
        min-width: 300px;
        position: relative;
        .el-button {
          position: absolute;
          bottom: 11px;
          left: 140px;
        }
      }
      .row {
        display: flex;
        flex-wrap: wrap;
      }
    }

    .businesscard {
      letter-spacing: 1.2px;
      line-height: 30px;
      color: #666;
      margin: 10px 10px 10px 20px;
      padding: 10px;
      background: #e1f3d8;
    }
  }

  .more {
    position: absolute;
    bottom: 20px;
    left: 50%;
    color: #999;
    transform: translateX(-50%);
  }

  .dynamic-list {
    padding: 20px;
    margin-top: 20px;
    border-radius: 6px;
    margin-bottom: 50px;
    position: relative;
    .item {
      border-left: 2px solid #f5f5f5;
      padding: 30px 0 50px 20px;
      position: relative;
      .info {
        position: absolute;
        top: -10px;
        left: 20px;
        font-size: 14px;
        color: #999;
        .state {
          color: #333;
        }
      }
      .blogger {
        background: #fff;
        padding: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
        display: flex;
        border-radius: 5px;
        .head-img {
          width: 50px;
          height: 50px;
          background: #f5f5f5;
          border-radius: 50%;
          margin-right: 10px;
          overflow: hidden;
        }
        p {
          &:nth-child(1) {
            font-weight: 600;
            margin-top: 6px;
          }
          &:nth-child(2) {
            color: #999;
            font-size: 14px;
          }
        }
      }
      .notice {
        background: #fff;
        border-radius: 5px;
        padding: 10px;
        margin-top: 10px;
        font-size: 14px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
      }

      &::before {
        content: "";
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #eee;
        position: absolute;
        left: -10px;
        top: -10px;
      }
    }
    .more {
      bottom: 100px !important;
    }
  }
}

@media (max-width: 550px) {
  .friend-list {
    .item {
      min-width: 120px !important;
      margin: 5px !important;
    }
  }
}
</style>
